<template>
  <div class="about">
    <header>
      <span @click="$router.back()">返回</span>
      <section>详情页面</section>
      <span></span>
    </header>
    <img :src="detail.cover_url" alt="">
    <p>{{detail.title}}</p>
    <button @click="$store.commit('addCart',detail),$router.push('/cart')">加入购物车</button>
  </div>
</template>
<script>
import { useRoute } from 'vue-router';
import axiso from 'axios';
import { ref } from 'vue';
export default {
  setup(props) {
    const { query } = useRoute();
    const detail = ref({});
    axiso.get(`https://api.shop.eduwork.cn/api/goods/${query.id}`).then(res => {
      detail.value = res.data.goods;
    })
    return {
      detail
    }
  }
}
</script>
<style lang="scss" scoped>
header{
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  span{
    width: 80px;
    text-align: center;
  }
  section{
    flex: 1;
    text-align: center;
  }
}
</style>
